<template>
  <div class="modal" v-if="modalshow" @click.self="closeonclickmodal && hide()">
    <div class="dialog_modal" ref="innerBox" v-drag :style="styleobj">
      <div class="modal_top" v-show='modaltitle'>
        <img src="~@/assets/img/icon.png" ondragstart="return false">
        <span style="font-size:18px;vertical-align: top;cursor: inherit;">{{modaltitle}}</span>
        <div class="modal_colse" @click="hide"></div>
      </div>
      <div style="height: calc(100% - 40px);width: 100%;overflow: hidden" @mousedown.stop="{}">
        <slot name="modal"></slot>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'Vmodal',
    data () {
      return {
      }
    },
    methods: {
      hide () {
        this.$emit('hide')
      }
    },
    watch: {
      modalshow (newVal, oldVal) {
        if (newVal) {
          this.$nextTick(() => {
            let el = this.$refs.innerBox
            let pEl = el.parentElement
            el.style.left = (pEl.offsetWidth - el.offsetWidth) / 2 + 'px'
            el.style.top = (pEl.offsetHeight - el.offsetHeight) / 2 + 'px'
          })
        }
      }
    },
    props: {
      modalshow: {
        type: Boolean,
        default: false
      },
      modaltitle: {
        type: String,
        default: ''
      },
      closeonclickmodal: {
        type: Boolean,
        default: true
      },
      styleobj: {
        type: Object,
        default: () => {
          return {}
        }
      }
    }
  }
</script>

<style scoped>
  .modal {
    position: fixed;
    top: 50px;
    left: 0;
    bottom: 0;
    right: 0;
    overflow: hidden;
    z-index: 400;
    background-color: rgba(0, 0, 0, 0.3);
  }

  .modal.isBrowser {
    top: 30px !important;
  }

  .dialog_modal {
    position: absolute;
    border: 1px solid #157ac1;
  }

  .modal_top {
    height: 40px;
    line-height: 40px;
    color: white;
    position: relative;
    background: #157ac1;
    cursor: default;
  }

  .modal_top img {
    height: 100%;
    padding: 8px;
    cursor: inherit;
  }

  .modal_colse {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translate(0, -50%);
    background-image: url("~@/assets/img/window_control/close.png");
    background-repeat: no-repeat;
    background-position: center;
    width: 30px;
    height: 30px;
    cursor: pointer;
  }

  .modal_colse:hover {
    background-image: url("~@/assets/img/window_control/close_hover.png");
  }
</style>
